<template>
	<view>
		<u-navbar title-color="#fff" :is-back="true" 
		:is-fixed="true" :background="background" title="活动内容" :back-text-style="{color: '#fff'}">
		</u-navbar>
		<view style="width: 100%;height: 400rpx;background-color: #333333;-webkit-background-size: cover;
		background-repeat: no-repeat;background-position: center;background-size: cover;" 
		:style="{'background-image':'url('+activity.image+')'}">
		</view>
		<view style="background-color: #FFFFFF;height: 220rpx;width: 100%;padding: 40rpx;display: flex;justify-content: space-between;align-items: center;">
			<view>
				<view style="margin-bottom: 20rpx;font-size: 36rpx;font-weight: 900;">
					{{activity.title}}
				</view>
				<view>
					<view>活动时间：{{activity.createTime}}~{{activity.endTime}}</view>
					<view style="margin-top: 10rpx;">主办单位：{{club.university}}-{{activity.clubName}}</view>
				</view>
			</view>
			<view>
				<view style="border-radius: 20rpx;border: 1rpx solid #18B566;padding: 5rpx 10rpx;">上限：{{activity.joinmax}}人</view>
				<view style="border-radius: 20rpx;border: 1rpx solid #18B566;margin-top: 20rpx;padding: 5rpx 10rpx;">已有：{{activity.joinnum}}人</view>
			</view>
		</view>
		
		<view style="margin-top: 20rpx;height: auto;min-height: 300rpx;width: 100%;">
			<!-- tab切换 -->
			<activity-details-tab :tabBars="tabBars" @tabtap="tabtap" :tabIndex="tabIndex"></activity-details-tab>
			<!-- 中间内容 -->
			<scroll-view v-show="tabIndex==0" scroll-y :style="{height:listHeight+'px'}" style="background-color: #FFFFFF;width: 100%;">
				<view style="text-indent:2em;line-height: 40rpx;font-size: 32rpx;padding: 40rpx;margin-bottom: 80rpx;">
					{{activity.detail}}
				</view>
				<u-button style="font-size: 24rpx;letter-spacing:30rpx;height: 80rpx;line-height: 80rpx;font-size: 48rpx;font-weight: 900;position: fixed;bottom: 0;left: 0;width: 100%;"
				@click="baoming()" data-name="报名活动" shape="square" size="default" :ripple="true" :type="baomingButtonColor"
				:loading="baomingLoding"
				:disabled="baomingButtonColor=='success'||baomingButtonColor=='error'">
					{{buttonText}}
				</u-button>
			</scroll-view>
			<scroll-view v-show="tabIndex==1" scroll-y :style="{height:listHeight+'px'}" style="background-color: #FFFFFF;width: 100%;position: relative;">
				<comment :commentList="commentList" style="margin-bottom: 80rpx;"></comment>
				<view style="height: 80rpx;display: flex;justify-content: space-between;align-items: center;padding: 0 20rpx;position: fixed;bottom: 0;left: 0;width: 100%;background-color: #FFFFFF;border-top: #EEEEEF;">
					<input v-model="mycomment" placeholder="输入评论" style="height: 60rpx;width: 80%;background-color: #EEEEEF;border: #303133;border-radius: 20rpx;padding:10rpx 20rpx;"/>
					<u-button style="font-size: 30rpx;" @click="submitCommit()" data-name="3333" shape="circle" size="mini" :ripple="true" type="success">提交</u-button>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import activityDetailsTab from "./activity-details-tab.vue";
	import comment from "../../components/activity/comment.vue";
	export default {
		computed: mapState(['isLogin', 'loginUserInfo']),
		components: {activityDetailsTab,comment},
		data() {
			return {
				activity:null,
				club:null,
				background: {
					'background': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				listHeight: this.swiperHeight - 371,
				tabIndex: 0,
				tabBars: [{
						name: "活动详情",
						id: "0"
					},
					{
						name: "活动评价",
						id: "1"
					}
				],
				baomingButtonColor:"warning",
				mycomment:"",
				commentList:[],
				commentPage:1,
				commentSize:10,
				buttonText:"报名活动",
				isSuccesssBaoMing:false,
				baomingLoding:false,
			}
		},
		onShow(){
			this.loadCommitList()
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.activity = JSON.parse(decodeURIComponent(option.activity))
			this.club = JSON.parse(decodeURIComponent(option.club))
			if(this.activity.status==2){
				this.baomingButtonColor = "error"
				this.buttonText = "活动审核失败"
			}else if(this.activity.status==0){
				this.baomingButtonColor = "error"
				this.buttonText = "活动正在审核中"
			}else{
				if(this.activity.isend==1){
				}else if(this.activity.joinmax==this.activity.joinnum){
					this.baomingButtonColor = "error"
					this.buttonText = "报名名额不足"
				}else{
					this.baomingButtonColor = "warning"
				}
				if(this.isLogin){
					uni.request({
						url: this.url.usermovement.judgeUserMovementIsEmpty+'/'+this.activity.id+'/'+this.loginUserInfo.id, 
						method:'GET',
						success: (res) => {
							console.log(res)
							if(res.data.userMovement!=null){
								if(res.data.userMovement.status=='1'){
									this.baomingButtonColor = "success"
									this.buttonText = "已报名"
								}else{
									this.baomingButtonColor = "success"
									this.buttonText = "报名申请审核中"
								}
							}
						},
						fail:(res)=>{
							console.log(res)
						}
					});
				}else{
					this.buttonText = "登录后报名"
				}
			}
		},
		methods: {
			// 监听子组件的tab点击事件
			tabtap(index) {
				this.tabIndex = index;
				console.log(this.tabIndex)
			},
			baoming(){
				if(!this.isLogin){
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return;
				}
				this.baomingLoding = true;
				var userMovement = {
					userId:this.loginUserInfo.id,
					userName:this.loginUserInfo.username,
					movementId:this.activity.id,
					movementName:this.activity.title,
				}
				uni.request({
					url: this.url.usermovement.save, 
					method:'POST',
					data: JSON.stringify(userMovement),
					header: {
						"content-type":"application/json;charset=UTF-8"
					},
					success: (res) => {
						console.log(res)
						this.baomingLoding = false;
						if(res.statusCode==200){
							this.$u.toast('报名成功!!')
							this.activity.joinnum = this.activity.joinnum+1
							this.baomingButtonColor = "success"
							this.buttonText = "报名申请审核中"
						}
					},
					fail:(res)=>{
						this.baomingLoding = false;
						console.log(res)
					}
				});
			},
			loadCommitList(){
				uni.request({
					url: this.url.comment.getCommentByMovementId+'/'+this.activity.id+'/'+this.commentPage+'/'+this.commentSize, 
					method:'GET',
					success: (res) => {
						this.commentList = res.data.commentPage.records;
					},
					fail:(res)=>{
						console.log(res)
					}
				});
			},
			submitCommit(){
				if(!this.isLogin){
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
				if(this.isEmpty(this.mycomment)){
					console.log("空评论")
					return;
				}
				var comment = {
					username:this.loginUserInfo.username,
					userId:this.loginUserInfo.id,
					userAvatar:this.loginUserInfo.avatar,
					content:this.mycomment,
					movementId:this.activity.id
				}
				console.log(this.url.comment.save)
				uni.request({
					url: this.url.comment.save, 
					method:'POST',
					data: JSON.stringify(comment),
					header: {
						"content-type":"application/json;charset=UTF-8"
					},
					success: (res) => {
						this.mycomment=""
						console.log(res)
						if(res.statusCode==200){
							this.loadCommitList()
						}
					},
					fail:(res)=>{
						console.log(res)
					}
				});
				console.log(comment)
			}
		}
	}
</script>

<style>

</style>
